<template>
	<view class="menu">
		<view class="main_menu">
			<view class="menu_list" v-for="item in menus" :key="item.id">
				<image :src="item.url" class="image" />
				<view class="menu_title">{{ item.title }}服务</view>
			</view>
		</view>
		<!-- 详细项目 -->
		<view class="specific">
			<view class="box_component"></view>
			<view class="specific_list_box">
				<view class="specific_list" v-for="item in specifics" :key="item.id">
					<image :src="item.url" class="image" />
					<view>{{ item.title }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import baojie from '@/static/menus/baojie.png';
import weixiu from '@/static/menus/weixiu.png';
import qingxi from '@/static/menus/qingxi.png';
import qita from '@/static/menus/qita.png';
import a from '@/static/specific/a.png';
import b from '@/static/specific/b.png';
import c from '@/static/specific/c.png';
import d from '@/static/specific/d.png';
import e from '@/static/specific/e.png';
import f from '@/static/specific/f.png';
import g from '@/static/specific/g.png';
import h from '@/static/specific/h.png';
import i from '@/static/specific/i.png';
import j from '@/static/specific/j.png';
import k from '@/static/specific/k.png';
import m from '@/static/specific/m.png';
import n from '@/static/specific/n.png';
import o from '@/static/specific/o.png';
import p from '@/static/specific/p.png';

//大类菜单
const menus = ref([
	{ id: 1, type: 1, title: '保洁', url: baojie },
	{ id: 2, type: 2, title: '维修', url: weixiu },
	{ id: 3, type: 3, title: '清洗', url: qingxi },
	{ id: 4, type: 4, title: '其他', url: qita }
]);
//具体项目
const specifics = ref([
	{ id: 1, type: 1, title: '日常保洁', url: a },
	{ id: 2, type: 1, title: '开荒保洁', url: b },
	{ id: 3, type: 1, title: '精细保洁', url: c },
	{ id: 4, type: 1, title: '小时工', url: d },
	{ id: 5, type: 2, title: '洗衣机维修', url: e },
	{ id: 6, type: 2, title: '空调维修', url: f },
	{ id: 7, type: 2, title: '电脑维修', url: g },
	{ id: 8, type: 2, title: '电视维修', url: h },
	{ id: 9, type: 3, title: '马桶疏通', url: i },
	{ id: 10, type: 3, title: '管道疏通', url: j },
	{ id: 11, type: 4, title: '沙发清洗', url: k },
	{ id: 12, type: 4, title: '窗帘清洗', url: m },
	{ id: 13, type: 5, title: '保姆', url: n },
	{ id: 14, type: 6, title: '陪诊', url: o },
	{ id: 15, type: 0, title: '更多服务', url: p }
]);
</script>

<style lang="scss" scoped>
.menu {
	.main_menu {
		padding: 20rpx 0;
		display: flex;
		justify-content: space-around;
		align-items: center;
		.menu_list {
			width: 100rpx;
			height: 100rpx;
			background-color: #fff;
			border-radius: 50%;
			text-align: center;
			line-height: 100rpx;
			.image {
				display: block;
				width: 100%;
				height: 100%;
			}
			.menu_title {
				line-height: 1.6;
				font-size: 24rpx;
				color: #fff;
			}
		}
	}

	.specific {
		position: relative;
		background-color: #fff;
		border-top-left-radius: 8%;
		border-top-right-radius: 8%;
		margin-top: 50rpx;
		padding-bottom: 30rpx;
		.specific_list_box {
			padding-top: 30rpx;
			display: flex;
			justify-content: space-around;
			flex-wrap: wrap;
			.specific_list {
				margin-bottom: 10rpx;
				width: 150rpx;
				text-align: center;
				font-size: 20rpx;
				.image {
					display: block;
					margin: 10px auto;
					width: 40rpx;
					height: 40rpx;
				}
			}
		}
	}
}
</style>
